<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="sf"uri="http://www.springframework.org/tags/form"%>
<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>User Infomation</title>
	<style>
		.userInfo {
			border-collapse: collapse;
		}

		.userInfo td {
			border: solid 1px #999;
			padding: 0 10px 0 10px;
		}
	</style>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script>
		function getUserInfo() {
			var userId = $('#userId').val();
			$.getJSON("info?id=" + userId, function(data, textStatus, jqXHR) {
				var user = data
				$("#userInfoTable td:contains('ID')+td").text(user.id);
				$("#userInfoTable td:contains('Username')+td").text(user.username);
				$("#userInfoTable td:contains('E-Mail')+td").text(user.email);
				$("#userInfoTable td:contains('Address')+td").text(user.address);

			})
		}
	</script>
</head>
<body>
	<input id="userId" type="text" ><input type="button" value="Get" onclick="getUserInfo()" >
	<table class="userInfo" id="userInfoTable">
		<tr>
			<td>ID</td>
			<td></td>
		</tr>
		<tr>
			<td>Username</td>
			<td></td>
		</tr>
		<tr>
			<td>E-Mail</td>
			<td></td>
		</tr>
		<tr>
			<td>Address</td>
			<td></td>
		</tr>
	</table>
</body>
</html>